<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" :style="{ marginTop: safeTop + 'px' }">
			</view>
			<view class="header-right"></view>
		</view>

		<!-- 固定 Tab 栏 -->
		<view class="fixed-section">
			<view :style="{ height: heardSwitchTop + 'px' }"></view>
			<view class="tabs">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: activeTab === index }" @click="switchTab(index)">
					<text class="tab-text">{{ tab }}</text>
				</view>
			</view>
		</view>

		<!-- 主内容 -->
		<scroll-view :key="scrollViewKey" scroll-y class="content" :style="{ marginTop: authorAndCoverTop + 'px' }">
			<!-- 待处理 -->
			<view v-if="activeTab === 0">
				<template v-if="Array.isArray(dataList[0]) && dataList[0].length > 0">
					<view v-for="(item, index) in dataList[0]" :key="index" class="task-card-pending">
						<view @click="goToCreativeDetail(item.id, 1)" class="author-and-cover">
							<view class="author-info">
								<image v-if="item.avatar" :src="item.avatar" class="author-avatar" mode="aspectFill">
								</image>
								<image v-else src="/static/images/f.png" class="author-avatar" mode="aspectFill">
								</image>
								<view class="author-details">
									<view class="author-name">
										<text>{{ item.nickname }}</text>
									</view>
									<text class="work-title">{{ item.title }}</text>
									<text class="work-content">{{ item.content }}</text>
								</view>
							</view>
							<view class="work-cover-wrapper" v-if="item.images && item.images.length > 0">
								<image @tap.native.stop="previewImages(item.images)" :src="item.images[0]"
									class="work-cover" mode="aspectFill"></image>
							</view>
						</view>
						<view class="meta-row">
							<text class="add-time">{{ formatDateWithTime(item.add_time) }}</text>
							<view class="stats">
								<view class="stat-item">
									<image src="/static/base/index/good.png" class="icon" mode="aspectFit" />
									<text>{{ item.likeNum }}</text>
								</view>
								<view class="stat-item">
									<image src="/static/base/index/comment.png" class="icon" mode="aspectFit" />
									<text>{{ item.replyNum }}</text>
								</view>
							</view>
						</view>
						<view class="action-buttons">
							<button class="btn reject" @click="confirmReject(item.id)">拒绝</button>
							<button class="btn accept" @click="handleProcess(item.id, 1)">接受</button>
						</view>
					</view>
				</template>
				<view v-else class="empty-tips">还没有内容哦~</view>
			</view>

			<!-- 设计中 -->
			<view v-if="activeTab === 1">
				<template v-if="Array.isArray(dataList[1]) && dataList[1].length > 0">
					<view v-for="(item, index) in dataList[1]" :key="index" class="task-card-in-progress">
						<view @click="goToCreativeDetail(item.work_id, 1)" class="author-and-cover">
							<view class="author-info">
								<image v-if="item.work_avatar" :src="item.work_avatar" class="author-avatar"
									mode="aspectFill"></image>
								<image v-else src="/static/images/f.png" class="author-avatar" mode="aspectFill">
								</image>
								<view class="author-details">
									<view class="author-name">
										<text>{{ item.work_nickname ? item.work_nickname : '暂无昵称' }}</text>
									</view>
									<text class="work-title">{{ item.work_title ? item.work_title : '暂无标题' }}</text>
									<text
										class="work-content">{{ item.work_content ? item.work_content : '暂无描述内容'}}</text>
								</view>
							</view>
							<view class="work-cover-wrapper">
								<image v-if='item.work_images' @tap.native.stop="previewImages([item.work_images])"
									:src="item.work_images" class="work-cover" mode="aspectFill"></image>
								<image v-else src="/static/base/empty.png" class="work-cover" mode="aspectFill"></image>
							</view>
						</view>

						<view class="progress-section">
							<view class="progress-line-container">
								<view class="progress-line"></view>
								<view class="steps">
									<view class="step-item">
										<view class="step-icon" :class="{ completed: item.status >= 1 }">
											<image :src="getStepIcon('scissors', item.status >= 1)"
												class="step-icon-img" mode="aspectFit"></image>
										</view>
										<view class="step-label">开始设计</view>
										<view class="step-date" v-if="item.add_time">
											{{ formatDateWithTime(item.add_time) }}
										</view>
									</view>
									<view class="step-item">
										<view class="step-icon"
											:class="{ completed: item.status >= 3 || item.status === 4 }">
											<image :src="getStepIcon('doc', item.status >= 3 || item.status === 4)"
												class="step-icon-img" mode="aspectFit"></image>
										</view>
										<view class="step-label">初稿/次稿</view>
										<view class="step-date" v-if="item.draft_time">
											{{ formatDateWithTime(item.draft_time) }}
										</view>
									</view>
									<view class="step-item">
										<view class="step-icon" :class="{ completed: item.status === 2 }">
											<image :src="getStepIcon('check', item.status === 2)" class="step-icon-img"
												mode="aspectFit"></image>
										</view>
										<view class="step-label">设计定稿</view>
										<view class="step-date" v-if="item.final_time">
											{{ formatDateWithTime(item.final_time) }}
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 设计历史 -->
						<view v-if="item.draftHistory && item.draftHistory.length > 0" class="design-history-section">
							<view class="section-title">设计历史</view>
							<view v-for="(history, hIndex) in item.draftHistory" :key="hIndex" class="history-item">
								<view class="history-content-wrapper">
									<view class="history-author-info">
										<image v-if="history.avatar" :src="history.avatar" class="history-avatar"
											mode="aspectFill"></image>
										<image v-else src="/static/images/f.png" class="history-avatar"
											mode="aspectFill">
										</image>
										<view class="history-author-details">
											<view class="history-author-name">
												<text>{{ history.nickname }}</text>
												<text class="history-status-tag">设计稿</text>
											</view>
											<text class="history-title">{{ history.title }}</text>
											<text class="history-content">{{ history.content }}</text>
										</view>
									</view>
									<view class="history-cover-wrapper"
										v-if="history.images && history.images.length > 0">
										<image @tap.stop="previewImages(history.images)" :src="history.images[0]"
											class="history-cover" mode="aspectFill"></image>
									</view>
								</view>
								<view class="history-meta-row">
									<text class="history-date">{{ formatDateWithTime(history.draft_time) }}</text>
									<view class="history-stats">
										<view class="stat-item">
											<image src="/static/base/index/good.png" class="icon" mode="aspectFit" />
											<text>{{ history.likeNum }}</text>
										</view>
										<view class="stat-item">
											<image src="/static/base/index/comment.png" class="icon" mode="aspectFit" />
											<text>{{ history.replyNum }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="action-buttons-publish">
							<template v-if="item.status === 1">
								<button class="btn publish" @click="openPublishModal(item.id)">发布初稿</button>
							</template>
							<template v-else-if="item.status === 3">
								<button class="btn publish disabled">审核中</button>
							</template>
							<template v-else-if="item.status === 4">
								<button class="btn publish" @click="openPublishModal(item.id)">再次发布</button>
							</template>
						</view>
					</view>
				</template>
				<view v-else class="empty-tips">还没有内容哦~</view>
			</view>

			<!-- 已定稿 -->
			<view v-if="activeTab === 2">
				<template v-if="Array.isArray(dataList[2]) && dataList[2].length > 0">
					<view v-for="(item, index) in dataList[2]" :key="index" class="task-card-completed">
						<view @click="goToCreativeDetail(item.draft_list_id, 2)" class="author-and-cover">
							<view class="author-info">
								<image v-if="item.avatar" :src="item.avatar" class="author-avatar"
									mode="aspectFill"></image>
								<image v-else src="/static/images/f.png" class="author-avatar" mode="aspectFill">
								</image>
								<view class="author-details">
									<view class="author-name">
										<text>{{ item.nickname }}</text>
									</view>
									<text class="work-title">{{ item.title }}</text>
									<text class="work-content">{{ item.content }}</text>
								</view>
							</view>
							<view class="work-cover-wrapper">
								<image @tap.native.stop="previewImages(item.images)" :src="JSON.parse(item.images)[0]"
									class="work-cover" mode="aspectFill"></image>
							</view>
						</view>
						<view class="progress-section">
							<view class="progress-line-container">
								<view class="progress-line"></view>
								<view class="steps">
									<view class="step-item">
										<view class="step-icon completed">
											<image src="/static/base/index/step-scissors-white.png"
												class="step-icon-img" mode="aspectFit"></image>
										</view>
										<view class="step-label">开始设计</view>
										<view class="step-date">{{ formatDateWithTime(item.add_time) }}</view>
									</view>
									<view class="step-item">
										<view class="step-icon completed">
											<image src="/static/base/index/step-doc-white.png" class="step-icon-img"
												mode="aspectFit"></image>
										</view>
										<view class="step-label">初稿/次稿</view>
										<view class="step-date">{{ formatDateWithTime(item.draft_time) }}</view>
									</view>
									<view class="step-item">
										<view class="step-icon completed">
											<image src="/static/base/index/step-check-white.png" class="step-icon-img"
												mode="aspectFit"></image>
										</view>
										<view class="step-label">设计定稿</view>
										<view class="step-date">{{ formatDateWithTime(item.final_time) }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<view v-else class="empty-tips">还没有内容哦~</view>
			</view>

			<!-- 已拒绝 -->
			<view v-if="activeTab === 3">
				<template v-if="Array.isArray(dataList[3]) && dataList[3].length > 0">
					<view v-for="(item, index) in dataList[3]" :key="index" class="task-card-rejected">
						<view class="rejection-tip">
							<text v-if="item.status === 0">主动拒绝</text>
							<text v-else-if="item.status === 5">其他设计师已完成</text>
						</view>
						<view @click="goToCreativeDetail(item.work_id, 1)" class="author-and-cover">
							<view class="author-info">
								<image v-if="item.work_avatar" :src="item.work_avatar" class="author-avatar"
									mode="aspectFill"></image>
								<image v-else src="/static/images/f.png" class="author-avatar" mode="aspectFill">
								</image>
								<view class="author-details">
									<view class="author-name">
										<text>{{ item.work_nickname }}</text>
									</view>
									<text class="work-title">{{ item.work_title }}</text>
									<text class="work-content">{{ item.work_content }}</text>
								</view>
							</view>
							<view class="work-cover-wrapper">
								<image @tap.native.stop="previewImages([item.work_images])" :src="item.work_images"
									class="work-cover" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</template>
				<view v-else class="empty-tips">还没有内容哦~</view>
			</view>

			<view style="height: 120rpx;"></view>
		</scroll-view>

		<!-- 发布模态框 -->
		<view v-if="showModal" class="modal-mask" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text>{{ currentDraftId ? (hasDraft ? '再次发布' : '发布初稿') : '发布初稿' }}</text>
				</view>
				<input v-model="draftTitle" class="modal-title-input" placeholder="请输入初稿标题" maxlength="50" />
				<textarea v-model="draftContent" class="modal-textarea" placeholder="请输入描述..." maxlength="500" />
				<view class="image-section">
					<view class="selected-images">
						<view v-for="(img, idx) in selectedImages" :key="idx" class="image-item">
							<image :src="img.url" class="uploaded-image" mode="aspectFill" />
							<view class="delete-btn" @click="removeImage(idx)">
								<text class="delete-text">×</text>
							</view>
						</view>
						<view v-if="selectedImages.length < 9" class="add-more-btn" @click="chooseImage">
							<text class="add-more-text">+</text>
						</view>
					</view>
				</view>

				<view class="modal-footer">
					<view class="cancel-btn" @click="closeModal">取消</view>
					<view class="publish-btn" :class="{ disabled: !canPublishDraft }" @click="confirmPublish">发布</view>
				</view>
			</view>
		</view>

		<TableBar :current="0" :messagecount="messagecount" />
	</view>
</template>

<script>
	import TableBar from '@/components/base/table-bar/Index.vue'
	import {
		getUnreadMessage
	} from '@/api/base/message.js'
	import {
		getDesignerPendingWork,
		processWork,
		getDraftWork,
		publishDraft,
		getdraft_list // 新增导入
	} from '@/api/base/index.js'

	export default {
		components: {
			TableBar
		},
		data() {
			return {
				messagecount: 0,
				safeTop: 0,
				heardSwitchTop: 0,
				authorAndCoverTop: 0,
				activeTab: 0,
				scrollViewKey: Date.now(),
				tabs: ['待处理', '设计中', '已定稿', '已拒绝'],
				dataList: [
					[],
					[],
					[],
					[]
				],
				showModal: false,
				currentDraftId: null,
				draftTitle: '',
				draftContent: '',
				selectedImages: [],
				hasDraft: false
			}
		},
		computed: {
			canPublishDraft() {
				return this.draftTitle.trim().length > 0 && this.draftContent.trim().length > 0 && this.selectedImages
					.length > 0
			}
		},
		onLoad() {
			const {
				barTop
			} = this.$util.getWXStatusHeight()
			this.safeTop = barTop + 2
			this.heardSwitchTop = barTop + 35
			this.authorAndCoverTop = barTop + 70
			this.loadTabData(0)
		},
		onShow() {
			this.initMessage()
		},
		methods: {
			initMessage() {
				getUnreadMessage().then(res => {
					if (res.status === 200) {
						this.messagecount = res.data.like + res.data.comment
					} else(err => {
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						})
						console.log('获取数据失败', err);
					})
				}).catch(err => {
					console.log('获取数据失败', err);
				})
			},
			previewImages(oldimgs) {
				let imgs = oldimgs
				try {
					imgs = JSON.parse(imgs)
				} catch (e) {}
				console.log(imgs)
				// 预览图片
				uni.previewImage({
					urls: imgs
				});
			},
			goToProfile() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			switchTab(index) {
				if (this.activeTab === index) return
				this.activeTab = index
				this.loadTabData(index)
			},
			async loadTabData(tabIndex) {
				uni.showLoading({
					title: '加载中...'
				})
				try {
					let res
					if (tabIndex === 0) {
						res = await getDesignerPendingWork(1, 20)
						if (res.status === 200) {
							this.dataList[0] = res.data.list || []
							this.scrollViewKey = Date.now()
						}
					} else {
						const statusMap = {
							1: 1,
							2: 2,
							3: 0
						}
						res = await getDraftWork(statusMap[tabIndex], 1, 20)
						if (res.status === 200) {
							let list = (res.data.list || []).map(item => {
								let parsedImages = []
								if (typeof item.images === 'string') {
									try {
										parsedImages = JSON.parse(item.images) || []
									} catch (e) {
										console.warn('images parse failed:', item.images)
										parsedImages = []
									}
								} else if (Array.isArray(item.images)) {
									parsedImages = item.images
								}
								return {
									...item,
									images: JSON.stringify(parsedImages),
									draftHistory: [] // 初始化空数组
								}
							})

							// 👇 关键改动:如果是"设计中"标签页,先加载历史记录再赋值
							if (tabIndex === 1) {
								await this.loadDesignHistoryForItems(list)
							}

							// 👇 在历史记录加载完成后再赋值给 dataList
							this.$set(this.dataList, tabIndex, list)
							// 或者使用: this.dataList.splice(tabIndex, 1, list)

							this.scrollViewKey = Date.now()
						}
					}
				} catch (e) {
					console.error('加载失败:', e)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			// 新增：为设计中的每个作品加载设计历史
			async loadDesignHistoryForItems(items) {
				for (let item of items) {
					try {
						const res = await getdraft_list(item.id, 1, 5) // page=1, limit=5
						if (res.status === 200 && Array.isArray(res.data.list)) {
							// 将历史记录赋值给对应的作品项
							item.draftHistory = res.data.list
						}
					} catch (err) {
						console.error(`加载作品 ${item.work_id} 的设计历史失败:`, err)
						// 继续处理下一个作品，不中断整个循环
					}
				}

			},
			confirmReject(workId) {
				uni.showModal({
					title: '确认拒绝',
					content: '确定要拒绝该任务吗？',
					success: (res) => {
						if (res.confirm) {
							this.handleProcess(workId, 0)
						}
					}
				})
			},
			async handleProcess(workId, status) {
				uni.showLoading({
					title: '处理中...'
				})
				try {
					const res = await processWork(workId, status)
					if (res.status === 200) {
						if (status === 1) {
							uni.showToast({
								title: '已接受，可在“设计中”查看',
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '已拒绝，可在“已拒绝”查看',
								icon: 'none',
								duration: 2000
							})
						}
						this.dataList[0] = this.dataList[0].filter(item => item.id !== workId)
						this.scrollViewKey = Date.now()
					} else {
						throw new Error(res.msg || '操作失败')
					}
				} catch (e) {
					uni.showToast({
						title: e || '操作失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			openPublishModal(draftId) {
				const item = this.dataList[1].find(i => i.id === draftId)
				this.hasDraft = !!item.draft_time
				this.currentDraftId = draftId
				this.draftTitle = '' // 👈 重置标题
				this.draftContent = ''
				this.selectedImages = []
				this.showModal = true
			},
			closeModal() {
				if (this.draftContent.trim() || this.selectedImages.length > 0) {
					uni.showModal({
						title: '提示',
						content: '确定要放弃编辑吗？',
						success: (res) => {
							if (res.confirm) {
								this.resetModal()
							}
						}
					})
				} else {
					this.resetModal()
				}
			},
			resetModal() {
				this.showModal = false
				this.currentDraftId = null
				this.draftTitle = '' // 👈 重置
				this.draftContent = ''
				this.selectedImages = []
			},
			chooseImage() {
				const count = 9 - this.selectedImages.length
				uni.chooseImage({
					count,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						res.tempFilePaths.forEach(path => {
							this.selectedImages.push({
								url: path,
								tempPath: path
							})
						})
					}
				})
			},
			removeImage(index) {
				this.selectedImages.splice(index, 1)
			},
			async confirmPublish() {
				if (!this.canPublishDraft) {
					uni.showToast({
						title: '请填写标题、内容并上传图片',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '发布中...'
				})
				try {
					const uploadedImageUrls = []
					for (const img of this.selectedImages) {
						const url = await new Promise((resolve, reject) => {
							this.$util.uploadImgs(
								'upload/image',
								img.tempPath,
								(res) => {
									if (res.status === 200) resolve(res.data?.url || '')
									else reject(new Error(res.msg || '上传失败'))
								},
								(err) => reject(new Error(err.msg || '上传出错'))
							)
						})
						uploadedImageUrls.push(url)
					}

					//  传入 draftTitle（即使为空字符串也传）
					const res = await publishDraft(
						this.currentDraftId,
						this.draftContent.trim(),
						JSON.stringify(uploadedImageUrls),
						this.draftTitle.trim() //
					)

					if (res.status == 200) {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						})
						this.resetModal()
						this.loadTabData(1)
					} else {
						throw new Error(res.msg || '发布失败')
					}
				} catch (e) {
					uni.showToast({
						title: e.message || '发布失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			getStepIcon(type, completed) {
				const base = '/static/base/index/step-'
				const suffix = completed ? '-white.png' : '.png'
				return base + type + suffix
			},
			formatDate(timeStr) {
				if (!timeStr) return ''
				return timeStr.split(' ')[0]
			},
			formatDateWithTime(timeStr) {
				if (!timeStr) return ''
				return timeStr // 直接返回完整时间字符串（含时分秒）
			},
			goToCreativeDetail(id, workType) {
				uni.navigateTo({
					url: `/pages/sub_base/creative-detail/index?id=${id}&workType=${workType}`
				});
			},
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F2F8FC;
		overflow: hidden;
		position: relative;
		padding-bottom: 120rpx;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27.76rpx;
		z-index: 100;
	}

	.header-left {
		width: 76.14rpx;
		height: 76.14rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-right {
		width: 100rpx;
		display: flex;
		justify-content: space-between;
	}

	/* 新增：已拒绝顶部提示 */
	.rejection-tip {
		font-size: 24rpx;
		color: #FF6B6B;
		margin-bottom: 30rpx;
		padding-bottom: 10rpx;
		padding-left: 28rpx;
		border-bottom: 1rpx solid #afafaf;
	}

	/* 按钮禁用状态 */
	.btn.disabled {
		background: #ccc !important;
		color: #1f1f1f !important;
		opacity: 0.6;
	}


	.work-content {
		font-size: 25rpx;
		color: #666666;
		line-height: 1.6;
		margin-right: 4rpx;
		display: -webkit-box;
		/* 必须设置为 -webkit-box */
		-webkit-box-orient: vertical;
		/* 设置子元素排列方式为垂直 */
		-webkit-line-clamp: 2;
		/* 限制显示 2 行 */
		overflow: hidden;
		/* 超出隐藏 */
		text-overflow: ellipsis;
		/* 配合使用，虽然多行时主要靠 -webkit-line-clamp */
	}

	.empty-tips {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 100rpx 0;
	}

	.menu-icon {
		width: 45rpx;
		height: 45rpx;
	}

	.header-title {
		font-size: 31.23rpx;
		font-weight: 600;
		color: #333333;
	}

	.work-title {
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
		display: block;
	}

	.meta-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 12rpx 0;
	}

	.add-time {
		font-size: 22rpx;
		color: #999;
	}

	.stats {
		display: flex;
		gap: 20rpx;
	}

	.stat-item {
		display: flex;
		align-items: center;
		gap: 6rpx;
		font-size: 22rpx;
		color: #666;
	}

	.icon {
		width: 28rpx;
		height: 28rpx;
	}

	/* 模态框 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-content {
		background: #fff;
		width: 90%;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.modal-header {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.modal-title-input {
		width: 90%;
		height: 80rpx;
		border: 1px solid #eee;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		background: #fff;
	}

	.modal-textarea {
		width: 90%;
		height: 250rpx;
		border: 1px solid #eee;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.image-section {
		margin-bottom: 30rpx;
	}

	.selected-images {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.image-item {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
	}

	.delete-btn {
		position: absolute;
		top: 6rpx;
		right: 6rpx;
		width: 36rpx;
		height: 36rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.delete-text {
		color: white;
		font-size: 30rpx;
	}

	.add-more-btn {
		width: 150rpx;
		height: 150rpx;
		border: 2rpx dashed #ddd;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-more-text {
		font-size: 50rpx;
		color: #999;
	}

	.modal-footer {
		z-index: 1000;
		display: flex;
		justify-content: space-between;
	}

	.cancel-btn,
	.publish-btn {
		padding: 12rpx 40rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #666;
	}

	.publish-btn {
		background: #FF8A00;
		color: white;
	}

	.publish-btn.disabled {
		background: #ccc;
		color: #999;
	}

	/* 标签页样式 */
	.tabs {
		display: flex;
		padding: 0 27.76rpx;
		height: 69.4rpx;
		justify-content: center;
		margin: 13.88rpx auto;
	}

	/* 固定区域样式 */
	.fixed-section {
		position: fixed;
		/* top: 92px; */
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #F2F8FC;
	}

	.tab-item {
		height: 69.4rpx;
		display: flex;
		align-items: center;
		padding: 0 30.82rpx;
		position: relative;
	}

	.tab-item.active .tab-text {
		color: #000;
		font-weight: 600;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 30%;
		width: 40%;
		height: 3.47rpx;
		background-color: #000;
	}

	/* 任务卡片样式 */
	.content {
		padding: 20rpx 0;
	}


	.task-card-in-progress,
	.task-card-completed {
		background: #FFFFFF;
		padding: 50rpx 26.025rpx 43.375rpx;
		margin-bottom: 24rpx;
	}


	.task-card-pending,
	.task-card-rejected {
		background: #FFFFFF;
		padding: 50rpx 26.025rpx 18rpx;
		margin-bottom: 24rpx;
	}

	/* 截止时间行 */
	.deadline-row {
		font-size: 28rpx;
		color: #666666;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #E6E9F0;
		margin-bottom: 24rpx;
	}

	/* 作者信息和作品封面布局 */
	.author-and-cover {
		display: flex;
		margin-bottom: 28rpx;
		width: 100%;
		/* 强制父容器宽度 */
	}

	.author-info {
		width: 75%;
		display: flex;
		flex: 1;
		/* 确保它能撑开 */
	}

	.author-avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
		margin-right: 24rpx;
	}

	.author-details {
		flex: 1;
	}

	.author-name {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 30rpx;
	}

	.gold-tag {
		background: #FFD700;
		color: #303133;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-left: 16rpx;
	}

	.work-desc {
		font-size: 25rpx;
		color: #666666;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 作品封面容器 - 使用 aspect-ratio 实现 1:1 正方形 */
	.work-cover-wrapper {
		width: 25%;
		/* 保持原比例 */
		position: relative;
		overflow: hidden;
	}

	.work-cover {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		/* 👈 关键：强制 1:1 正方形 */
		object-fit: cover;
		border-radius: 12rpx;
	}

	/* 进度条样式 */
	.progress-section {
		margin: 44rpx 0 90rpx;
	}

	.progress-line-container {
		position: relative;
		height: 80rpx;
	}

	.progress-line {
		position: absolute;
		top: 29.495rpx;
		left: 86.75rpx;
		width: 70%;
		height: 1.735rpx;
		background: #E6E9F0;
	}

	.steps {
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33.33%;
	}

	.step-icon {
		width: 69.4rpx;
		height: 69.4rpx;
		border-radius: 43.375rpx;
		background: #F2F8FC;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 12rpx;
		transition: all 0.3s;
	}

	.step-icon.completed {
		background: rgb(241, 144, 96);
	}

	.step-icon-img {
		width: 41.64rpx;
		height: 41.64rpx;
	}

	.step-label {
		font-size: 24rpx;
		color: #303133;
		margin-bottom: 8rpx;
	}

	.step-date {
		font-size: 22rpx;
		color: #999999;
	}

	/* 操作按钮样式 */
	.action-buttons {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}

	.action-buttons-publish {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.btn {
		border-radius: 40rpx;
		padding: 10rpx 32rpx;
		font-size: 26rpx;
	}

	.reject {
		background: #F2F8FC;
		color: #666666;
		border: 1rpx solid #E6E9F0;
	}

	.accept {
		background: #FF8A00;
		color: #FFFFFF;
	}

	.publish {
		background: #FF8A00;
		color: #FFFFFF;
	}

	/* 小程序提示样式 */
	.myApplet {
		position: relative;
	}

	.myApplet::after {
		position: absolute;
		right: 55px;
		top: -5px;
		content: '';
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #fff;
	}

	/* 设计历史样式 */
	.design-history-section {
		margin-top: 100rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #E6E9F0;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.history-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #E6E9F0;
	}

	.history-item:last-child {
		border-bottom: none;
	}

	.history-content-wrapper {
		display: flex;
		margin-bottom: 20rpx;
		width: 100%;
	}

	.history-author-info {
		width: 75%;
		display: flex;
		flex: 1;
	}

	.history-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.history-author-details {
		flex: 1;
		min-width: 0;
		/* 👈 关键:允许文字收缩 */
	}

	.history-author-name {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 26rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.history-status-tag {
		font-size: 20rpx;
		color: #FFF;
		background: #FF8A00;
		padding: 2rpx 8rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}

	.history-title {
		font-size: 24rpx;
		font-weight: 500;
		color: #333;
		display: block;
		margin-bottom: 6rpx;
	}

	.history-content {
		font-size: 24rpx;
		color: #666666;
		line-height: 1.6;
		margin-right: 4rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 历史记录封面容器 */
	.history-cover-wrapper {
		width: 25%;
		position: relative;
		overflow: hidden;
		flex-shrink: 0;
	}

	.history-cover {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		/* 👈 保持 1:1 正方形 */
		object-fit: cover;
		border-radius: 12rpx;
	}

	/* 历史记录元数据行 */
	.history-meta-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12rpx;
	}

	.history-date {
		font-size: 22rpx;
		color: #999;
	}

	.history-stats {
		display: flex;
		gap: 20rpx;
	}
</style>